<template>
  <div>
    <el-container style="height: 900px; border: 1px solid #eee">
      <el-aside  style="width:300px;min-height: 100vh ;background-color: #001529;">
        <el-menu :default-active="$route.path" active-text-color="#fff" router
                 style="border: none;background-color: #001529;padding: 20px 50px" text-color="rgba(255,255,255,0.65)" >

              <el-menu-item v-if="role !== '管理员'" index="/index/admin/info">
                <i class="el-icon-user"></i>
                <span style="font-weight: 600">个人中心</span>
              </el-menu-item>
              <el-menu-item v-if="role === '管理员'" index="/index/admin/adminUser">
                <i class="el-icon-s-custom"></i>
                <span style="font-weight: 600">用户管理</span>
              </el-menu-item>
              <el-menu-item v-if="role === '租客'" index="/index/admin/adminHome">
                <i class="el-icon-s-home"></i>
                <span style="font-weight: 600">我的房源</span>
              </el-menu-item>
              <el-menu-item v-if="role !== '租客'" index="/index/admin/house">
                <i class="el-icon-s-grid"></i>
                <span style="font-weight: 600">房源管理</span>
              </el-menu-item>
              <el-menu-item v-if="role === '租客'" index="/index/admin/collect">
                <i class="el-icon-star-on"></i>
                <span style="font-weight: 600">我的收藏</span>
              </el-menu-item>
              <el-menu-item v-if="role === '租客'" index="/index/admin/myOrder">
                <i class="el-icon-s-order"></i>
                <span style="font-weight: 600">我的订单</span>
              </el-menu-item>
             <el-menu-item v-if="role === '租客'" index="/index/admin/myReservation">
                <i class="el-icon-date"></i>
                <span style="font-weight: 600">我的预约</span>
             </el-menu-item>
            <el-menu-item v-if="role === '房东'" index="/index/admin/reservation">
                <i class="el-icon-date"></i>
                <el-badge :value="valueCheck('reservationCount')" class="item">
                  <span style="font-weight: 600">预约管理</span>
                </el-badge>
            </el-menu-item>
              <el-menu-item v-if="role !== '租客'" index="/index/admin/order">
                <i class="el-icon-s-order"></i>
                <span style="font-weight: 600">订单管理</span>
              </el-menu-item>
              <el-menu-item v-if="role === '租客'" index="/index/admin/myFeedback">
                <i class="el-icon-question"></i>
                <span style="font-weight: 600">我的反馈</span>
              </el-menu-item>
              <el-menu-item v-if="role !== '租客'" index="/index/admin/adminFeedback">
                <i class="el-icon-s-comment"></i>
                <el-badge :value="valueCheck('feedbackCount')" class="item">
                  <span style="font-weight: 600">反馈管理</span>
                </el-badge>
              </el-menu-item>
              <el-menu-item v-if="role === '管理员'" index="/index/admin/adminNews">
                <i class="el-icon-s-promotion"></i>
                <span style="font-weight: 600">资讯管理</span>
              </el-menu-item>
              <el-menu-item v-if="role === '房东'" index="/index/admin/release">
                <i class="el-icon-office-building"></i>
                <span style="font-weight: 600">房源发布</span>
              </el-menu-item>
              <el-menu-item v-if="role === '房东'" index="/index/admin/termination">
                <i class="el-icon-s-release"></i>
                <el-badge :value="valueCheck('refundCount')" class="item">
                  <span style="font-weight: 600">退租管理</span>
                </el-badge>
              </el-menu-item>
              <el-menu-item v-if="role === '管理员'" index="/index/admin/data">
                <i class="el-icon-s-data"></i>
                <span style="font-weight: 600">数据统计</span>
              </el-menu-item>
              <el-menu-item v-if="role === '租客'" index="/index/admin/houseCustom">
                <i class="el-icon-s-custom"></i>
                <span style="font-weight: 600">定制房源</span>
              </el-menu-item>
              <el-menu-item v-if="role === '租客'" index="/index/admin/myCustom">
                <i class="el-icon-document-checked"></i>
                <span style="font-weight: 600">我的定制</span>
              </el-menu-item>
              <el-menu-item v-if="role === '管理员'" index="/index/admin/adminCustom">
                <i class="el-icon-document-checked"></i>
                <span style="font-weight: 600">定制统计</span>
              </el-menu-item>
              <el-menu-item v-if="role !== '管理员'" index="/index/admin/password">
                <i class="el-icon-unlock"></i>
                <span style="font-weight: 600">密码修改</span>
              </el-menu-item>
              <el-menu-item @click="logout">
                <i class="el-icon-switch-button"></i>
                <span style="font-weight: 600">退出登录</span>
              </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>

</template>


<script>
import axios from "axios";

export default {
  name: "Admin",

  mounted() {
    this.getRole()
    this.count()
  },
  data() {
    return {
      role:'',
      valueCount: {
        reservationCount: 0,
        feedbackCount: 0,
        refundCount: 0
      }
    }
  },
  methods: {
    logout() {
      this.$confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('正在退出登录，请稍候...');
        setTimeout(() => {
          // 跳转到首页
          this.$router.push('/index');
        }, 100);
        localStorage.clear();
      }).catch(() => {
        this.$message.info('已取消');
      });
    },
    /* 方法一：前端传回登录的用户id,后端进行相应的身份查询，存在风险
    getUserRole(){
      axios({
        url:"http://localhost:8090/user/getUserRole/"+JSON.parse(localStorage.getItem('login-user')).id,
        methods:'get'
      }).then(res=>{
        if (res.code === '200'){
          console.log(res.data)
          this.role = res.data
        }else{
          this.$message.error(res.msg)
        }
      })
    }
    */

    //方法二：通过token进行身份查询
    getRole() {
      axios({
        url: "http://localhost:8090/user/getUserRole",
        methods: 'get'
      }).then(res => {
        if (res.code === '200') {
          this.role = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    //统计每栏新信息数据
    count() {
      axios({
        url: '/data/valueCount',
        method: 'get'
      }).then(res => {
        if (res.code === '200') {
          //console.log("返回的数据信息是：",res.data)
          this.valueCount = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    //导航栏数据显示
    valueCheck(type) {
      const count = this.valueCount[type];
      return count > 0 ? count : '';
    },
  }

}
</script>

<style scoped>

.item {
  margin-top: 1px;
  margin-right: 50px;
}

.el-menu-item:hover{
  background: black;
}

.el-menu-item.is-active{
  background-color: #40a9ff !important;
}



</style>